// 配置路由
// 引入vue-router插件：经过打印查看，引入进来的VueRouter的构造函数
// vue基础学习构造函数：Vue,VueComponent,Vuex.Store,VueRouter
import VueRouter from 'vue-router'
import Vue from 'vue'

// 安装插件
Vue.use(VueRouter)

// 引入路由组件
import Home from '@/pages/Home'
import About from '@/pages/About'

// 引入二级路由【home路由组件里嵌套的子组件】
import News from '@/pages/homes/News'
import Message from '@/pages/homes/Message'


// 引入三级路由【message路由组件子路由detail】
import Detail from '@/pages/homes/messages/Detail'




// 配置项目的路由
// 通过VueRouter【路由器】类，创建了一个VueRouter类的一个实例

// 对外暴露
export default new VueRouter({

    mode:'history',
    // 配置项的K是没有商量余地的[route:路由]
    routes:[
        {
            // path 设置路由的k, path有的属性值务必都是小写的（设置path右侧v的时候，别忘记反斜杠）
            path:"/home",
            // component设置路由的v,一个k对应一个v
            component:Home,

            //配置项:里面出现children,children里面放置的一定是子路由
            children:[
                {
                    //第一种写法:路径书写全面,把上一级的路径带上
                    path:'/home/news',
                    component:News
                },
                {
                    //第二种写法:起一个子路由的名字即可【前面页不需要带/】
                    path:'message',
                    component:Message,

                    children:[
                        {
                            name:'yyqx',
                            // path:'detail',
                            path:'detail/:id/:name',
                            component:Detail
                        }
                    ]
                }
            ]

        },
        {
            path:'/about',
            component:About
        },
        //重定向书写位置,可以放在任意地方（不能放在路由里面），一般都是书写在最后位置
        {
            path:'/',
            redirect:"/about"
        }
    ]
})
